{% extends "frontend/base.html" %}
{% load static %}

{% block content %}
  <div class="Middle Middle_top">
    <div class="Middle-top">
      <div class="wrap">
        <div class="Middle-header">
          <h1 class="Middle-title">История заказов
          </h1>
          <ul class="breadcrumbs Middle-breadcrumbs">
            <li class="breadcrumbs-item"><a href="/">home</a>
            </li>
            <li class="breadcrumbs-item breadcrumbs-item_current"><span>История заказов</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Section Section_column Section_columnLeft">
      <div class="wrap">
        <div class="Section-column">
          <div class="Section-columnSection">
            <header class="Section-header">
              <strong class="Section-title">Навигация
              </strong>
            </header>
            <div class="Section-columnContent">
              <div class="NavigateProfile">
                <ul class="menu menu_vt">
                  <li class="menu-item"><a class="menu-link" href="/profile">Профиль</a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="/historyorder">История заказов</a>
                  </li>
<!--                  <li class="menu-item"><a class="menu-link" href="/historyview">История просмотра</a>-->
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="Section-content">
          <div class="Orders">
            <div v-for="order in orders" class="Order Order_anons">
              <div class="Order-personal">
                <div class="row">
                  <div class="row-block">
                    <a class="Order-title" :href="`/oneorder/${order.id}`">
                      Заказ&#32;<span class="Order-numberOrder">№${order.id}$</span>&#32;от&#32;<span class="Order-dateOrder">${order.createdAt}$</span></a>
                  </div>
                  <div class="row-block">
                    <div class="Order-info Order-info_delivery">
                      <div class="Order-infoType">Тип доставки:</div>
                      <div class="Order-infoContent">${order.deliveryType}$</div>
                    </div>
                    <div class="Order-info Order-info_pay">
                      <div class="Order-infoType">Оплата:</div>
                      <div class="Order-infoContent">${order.paymentType}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">Общая стоимость:
                      </div>
                      <div class="Order-infoContent">
                        <span class="Order-price">${order.totalCost}$$</span>
                      </div>
                    </div>
                    <div class="Order-info Order-info_status">
                      <div class="Order-infoType">Статус:</div>
                      <div class="Order-infoContent">${order.status}$</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block mixins %}
<script src="{% static 'frontend/assets/js/historyOrder.js' %}"></script>
{% endblock %}